﻿<div class="layui-fluid">
    <script src="/Scripts/src/lib/extend/exif.js"></script>
    <div class="layui-card">
        <script template type="text/html" lay-url="/Tool/getFormInfo" lay-data="{dataId:'{{layui.router().search.formId}}'}" lay-done="layui.data.done(d)">
            {{# if(d.data){ }}
            <h2 style="text-align:center;padding-top:10px">{{d.data.FormName}}</h2>
            <form class="layui-form {{d.data.FormClass}}" style="padding:20px" lay-filter="{{d.data.FormNo}}" id="{{d.data.FormNo}}">

                <input id="{{d.data.FormNo}}_photoimg" type="file" accept="image/*" capture="camera" style="display:none">
                <!--<div class="layui-form-item">
                    <label class="layui-form-label">图片上传</label>
                    <div class="layui-inline">
                        <input type="hidden" id="ImgUrl1" name="ImgUrl1" value="" lay-verify="required">
                        <img id="ImgUrl1-img" style="width:160px;height:160px;" />
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-sm" id="ImgUrl1-browse">
                            浏览
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm" style="display:none" id="ImgUrl1-upload">
                            上传
                        </button>
                        <div class="layui-form-mid layui-word-aux" style="float:none">选项改变后需要重新设置</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文件上传</label>
                    <div class="layui-input-block">
                        <input type="text" id="Files1" name="Files1" placeholder="" lay-verify="required" lay-vertype="tips" autocomplete="off" class="layui-input" disabled>
                    </div>
                    <div class="layui-input-block" style="margin-top:10px">
                        <button type="button" class="layui-btn layui-btn-sm" id="Files1-browse">
                            浏览
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm" style="display:none" id="Files1-upload">
                            上传
                        </button>
                        <div class="layui-form-mid layui-word-aux" style="float:none;display:inline">选项改变后需要重新设置</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">多图上传</label>
                    <blockquote class="layui-input-block layui-elem-quote layui-quote-nm" style="padding:10px">
                        <input type="hidden" name="ImgUrl2" value="" lay-verify="required">
                        <div id="ImgUrl2"></div>
                    </blockquote>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" id="ImgUrl2-browse">
                            浏览
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm" style="display:none" id="ImgUrl2-upload">
                            上传
                        </button>
                        <div class="layui-form-mid layui-word-aux" style="float:none;display:inline">选项改变后需要重新设置</div>
                    </div>
                </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="button" lay-submit lay-filter="{{d.data.FormNo}}-submit" value="提交测试" class="layui-btn layui-btn-default">
                    </div>
                </div>
            </form>
            {{# } }}
        </script>
    </div>
</div>

<script>

    layui.data.done = function (res) {
        if (res.data.tempForm) {
            var formItemsData = layui.admin.parse(res.data.tempForm);

            layui.use('reForm', function () {
                var $ = layui.$
                    , reForm = layui.reForm
                    , form = layui.form
                    , admin = layui.admin;

                ////普通图片上传
                //upload.render({
                //    elem: '#ImgUrl1-browse'
                //    , headers: {
                //        Authorization: 'Bearer ' + (layui.data(layui.setter.tableName)[layui.setter.request.tokenName] || '')
                //    }
                //    , url: layui.setter.fileApi+ '/Files/UploadFiles'
                //    , auto: false
                //    , accept: 'images'
                //    , bindAction: '#ImgUrl1-upload' //指向一个按钮触发上传
                //    , choose: function (obj) {
                //        obj.preview(function (index, file, result) {
                //            $('#ImgUrl1-img').attr('src', result);
                //            $('#ImgUrl1-upload').show();
                //        });
                //    }
                //    , before: function (obj) {
                //        $('#ImgUrl1-img').removeAttr('src');
                //    }
                //    , done: function (res) {
                //        $('#ImgUrl1').val(res.result);
                //        $('#ImgUrl1-img').attr('src', layui.setter.fileApi + res.result);

                //        $('#ImgUrl1-upload').hide();
                //    }
                //    , error: function () {
                //        $('#ImgUrl1-upload').hide();
                //    }
                //});

                ////文件上传
                //upload.render({
                //    elem: '#Files1-browse'
                //    , headers: {
                //        Authorization: 'Bearer ' + (layui.data(layui.setter.tableName)[layui.setter.request.tokenName] || '')
                //    }
                //    , url: layui.setter.fileApi+ '/Files/UploadFiles'
                //    , data: {source:'test'}
                //    , auto: false
                //    , accept: 'file'
                //    , bindAction: '#Files1-upload' //指向一个按钮触发上传
                //    , choose: function (obj) {
                //        obj.preview(function (index, file, result) {
                //            $('#Files1').val(file.name);
                //            $('#Files1-upload').show();
                //        });
                //    }
                //    , before: function (obj) {
                //        $('#Files1').val('');
                //    }
                //    , done: function (res) {
                //        $('#Files1').val(res.result);
                //        $('#Files1-upload').hide();
                //    }
                //    , error: function () {
                //        $('#Files1-upload').hide();
                //    }
                //});

                ////多图片上传
                //upload.render({
                //    elem: '#ImgUrl2-browse'
                //    , url: '/upload/'
                //    , auto: false
                //    , accept: 'images'
                //    , multiple: true
                //    , bindAction: '#ImgUrl2-upload' //指向一个按钮触发上传
                //    , choose: function (obj) {
                //        obj.preview(function (index, file, result) {
                //            $('#ImgUrl2').append('<img src="' + result + '" alt="' + file.name + '" style="width:160px;height:160px;margin-right:10px">');
                //        });
                //        $('#ImgUrl2-upload').show();
                //    }
                //    , before: function (obj) {
                //        $('#ImgUrl2').empty();
                //    }
                //    , done: function (res) {
                //        $('#ImgUrl2-upload').show();
                //    }
                //    , error: function () {

                //    }
                //});

                var activeItem;
                $('#' + res.data.FormNo).on('click', '[photobtn]', function (event) {
                    activeItem = $(this).closest('[reitemid]');
                    $('#' + res.data.FormNo + '_photoimg').click();
                });
                $('#' + res.data.FormNo).on('click', '[removeimg]', function (event) {
                    var imgValue = $(this).closest('[reitemid]').find('input:hidden');
                    var imgUrl = $(this).parent().find('img').attr('src');
                    imgValue.val(imgValue.val().replace(';' + imgUrl, '').replace(imgUrl + ';', '').replace(imgUrl, ''));
                    $(this).parent().remove();
                });
                $('#' + res.data.FormNo + '_photoimg').change(function () {
                    var _file = this.files[0];
                    var Orientation = "";

                    var fileSize = Math.round(_file.size / 1024 / 1024);

                    EXIF.getData(_file, function () {
                        EXIF.getAllTags(this);
                        Orientation = EXIF.getTag(this, 'Orientation');
                    });

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = new Image(), maxH = 300, maxW = 1080;

                        img.onload = function () {
                            var cvs = document.createElement('canvas'),
                                ctx = cvs.getContext('2d');

                            //if (img.height > maxH) {
                            //    img.width *= maxH / img.height;
                            //    img.height = maxH;
                            //}
                            if (img.width > maxW) {
                                img.height *= maxW / img.width;
                                img.width = maxW;
                            }
                            cvs.width = img.width;
                            cvs.height = img.height;

                            ctx.clearRect(0, 0, cvs.width, cvs.height);
                            ctx.drawImage(img, 0, 0, img.width, img.height);

                            var compressRate = reForm.getCompressRate(1, fileSize);

                            if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
                                //alert('旋转处理' + Orientation);
                                var imgtmp = new Image();
                                imgtmp.src = cvs.toDataURL('image/jpeg', compressRate);
                                imgtmp.onload = function () {
                                    var cvstmp = document.createElement('canvas');
                                    switch (Orientation) {
                                        case 6://需要顺时针（向左）90度旋转
                                            //alert('需要顺时针（向左）90度旋转');
                                            reForm.rotateImg(this, 'left', cvstmp);
                                            break;
                                        case 8://需要逆时针（向右）90度旋转
                                            //alert('需要顺时针（向右）90度旋转');
                                            reForm.rotateImg(this, 'right', cvstmp);
                                            break;
                                        case 3://需要180度旋转
                                            //alert('需要180度旋转');
                                            reForm.rotateImg(this, 'right', cvstmp);//转两次
                                            reForm.rotateImg(this, 'right', cvstmp);
                                            break;
                                    }

                                    var dataUrl = cvstmp.toDataURL('image/jpeg', compressRate);
                                    uploadImg(dataUrl);
                                }
                                return;
                            }

                            var dataUrl = cvs.toDataURL('image/jpeg', compressRate);
                            uploadImg(dataUrl);
                        };
                        img.src = e.target.result;
                        //img.src = this.result;
                    };
                    reader.readAsDataURL(_file);
                });
                function uploadImg(dataUrl) {
                    var imgArea = activeItem.find('.imgArea');
                    var imgValue = activeItem.find('input:hidden');
                    admin.req({
                        api: layui.setter.fileApi,
                        url: "/Files/UploadWxPic",
                        type: 'post',
                        loading: true,
                        data: { localData: dataUrl, source: 'mobileFormPhoto' },
                        done: function (res) {
                            imgArea.append('<li><img src="' + layui.setter.fileApi + res.result + '"/><span removeimg>删除</span></li>');
                            if (imgValue.val() === '')
                                imgValue.val(res.result);
                            else
                                imgValue.val(imgValue.val() + ';' + res.result);
                        }
                    })
                }

                var html = admin.getFormHtml(formItemsData);

                $('[lay-filter="' + res.data.FormNo + '"]').prepend(html);

                $.each(formItemsData, function (idx, json) {
                    reForm.bindFormHtml(json, res.param, res.data.FormNo);
                });

                form.verify(reForm.verify);
                $('[lay-filter="' + res.data.FormNo + '"] [lay-verType]').removeAttr("lay-verType");
                form.render(null, res.data.FormNo);

                form.on('submit(' + res.data.FormNo + '-submit)', function (data) {

                    var formData = reForm.getFilterFormData(data, res.data.FormNo);
                    layui.view.popup({ content: JSON.stringify(formData).replace(/\,/g, ',\n') });
                    return false;
                });
            })
        }
    }
</script>
